<template>
  <e-dropdown trigger="custom" :visible="visible" transfer>
    <Icon type="filter" :class="{on: visible}" @click="toggleDropdown"> </Icon>
    <template #list>
      <e-dropdown-menu>
        <e-checkbox-group
          v-model="checkedFilters"            
        >
          <e-checkbox v-for="(item,id) in column.filters" :key='id' class="haloe-table-head-filter-checkbox" :label="item.value" :disabled="item.disabled">{{item.label}}</e-checkbox>
        </e-checkbox-group>
        <div class="haloe-table-head-filter-footer">
          <e-button type="text" @click="handleResetFilter" :disabled="!checkedFilters.length">重置</e-button>
          <e-button type="primary" size="small" @click="handleFilter">确定</e-button>
        </div>
      </e-dropdown-menu>
    </template>
  </e-dropdown>
</template>

<script setup>
import Icon from '../icon/icon.vue';
import eDropdown from "../dropdown";
import eDropdownMenu from "../dropdown-menu";
import { ref } from 'vue';

const props = defineProps({
  column: {
    type: Object,
  },
})
const emit = defineEmits(['handleSelect'])

const visible = ref(false)
const checkedFilters = ref([])

const toggleDropdown = () => {
  visible.value = !visible.value
}

const handleResetFilter = (event) => {
  event.stopPropagation();
  checkedFilters.value = []
  // emit('handleSelect', null)
  // visible.value = false
}

const handleFilter = () => {
  emit('handleSelect', checkedFilters.value.length ? checkedFilters.value : null)
  visible.value = false
}
</script>